<template>
  <div>
    <el-button type="primary" @click="backPage">返回</el-button>
    <div style="height: calc(100vh - 180px);overflow-x: auto;border-bottom: 1px solid #e9e9eb;">
      <el-form label-position="top" :model="basicsFrom" ref="siteManageFromRef" class="labelFrom" :rules="siteRules">
        <el-form-item label="站点LOGO" prop="newImage" style="width: 410px">
          <ImageUpload :limit="1" v-model="basicsFrom.newImage" @baseUrl="handleBaseUrl" />
        </el-form-item>
        <el-form-item label="站点图标" prop="newIconImage" style="width: 480px">
          <ImageUpload :limit="1" v-model="basicsFrom.newIconImage" @baseUrl="handleIconBaseUrl" />
        </el-form-item>
        <el-form-item label="网站名称" prop="name" required>
          <el-input placeholder="请输入" v-model.trim="basicsFrom.name" class="itemFrom"></el-input>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-input v-model.trim="newPublishStatus" class="itemFrom" disabled />
        </el-form-item>
        <el-form-item label="国家" prop="countryId" required>
          <el-tree-select v-model="basicsFrom.countryId" placeholder="请选择" :data="sys_country" class="itemFrom"
            :props="defaultProps" :disabled="publishStatusDisabled" />
        </el-form-item>

        <el-form-item label="支付方式" prop="paymentWayIds" required>
          <el-select multiple v-model="basicsFrom.paymentWayIds" placeholder="请选择" class="itemFrom" @change="changePay">
            <el-option v-for="item in sys_pay_list" :key="item.id" :value="item.id" :disabled="!item.status"
              :label="item.name">
              <span style="float: left">{{ item.name }}</span>
              <span class="payType">
                {{ item.region }}
              </span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支持货币" prop="currencyIds" required>
          <el-select v-model="basicsFrom.currencyIds" placeholder="请选择" class="itemFrom" multiple
            :clearable="isTagDisabled(basicsFrom.currencyId)" @change="selectCurrency">
            <el-option v-for="item in sys_currency_code" :key="item.id" :label="item.description" :value="item.id"
              :disabled="item.disabled" />
            <template #tag>
              <!--  根据条件控制是否显示删除按钮 -->
              <el-tag v-for="code in basicsFrom.currencyIds" :key="code" type="info" :closable="isTagDisabled(code)"
                @close="handleClose(code)">{{sys_currency_code.find((e) => e.id === code)?.description}}</el-tag>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="默认货币" prop="currencyId" required>
          <el-select v-model="basicsFrom.currencyId" placeholder="请选择" class="itemFrom"
            :disabled="publishStatusDisabled">
            <el-option v-for="item in sys_currency_default" :key="item.id" :label="item.description" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="支持语言" prop="languageIds" required>
          <el-select v-model="basicsFrom.languageIds" placeholder="请选择" class="itemFrom" multiple clearable
            @change="selectLanguage" :disabled="publishStatusDisabled">
            <el-option v-for="dict in sys_language_type" :key="dict.id" :label="dict.description" :value="dict.id"
              :disabled="!dict.status" />
          </el-select>
        </el-form-item>
        <el-form-item label=" 默认语言" prop="languageId" required>
          <el-select v-model="basicsFrom.languageId" placeholder="请选择" class="itemFrom"
            :disabled="publishStatusDisabled">
            <el-option v-for="dict in sys_language_default" :key="dict.id" :label="dict.description" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="站点类型" prop="websiteTypeId" required>
          <el-select v-model="basicsFrom.websiteTypeId" placeholder="请选择" class="itemFrom">
            <el-option v-for="dict in sys_site_type" :key="dict.id" :label="dict.name" :value="dict.id"
              :disabled="!dict.status" />
          </el-select>
        </el-form-item>
        <el-form-item label="当前状态" prop="status" required>
          <el-select v-model="basicsFrom.status" placeholder="请选择" class="itemFrom">
            <el-option v-for="dict in sys_site_status" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务器" prop="newServerIds" required>
          <el-cascader v-model="basicsFrom.newServerIds" :options="sys_level_list" show-all-levels :props="serverProps"
            style="width: 400px;" @change="handleChange" :disabled="publishStatusDisabled" />
        </el-form-item>
        <el-form-item label="IP" prop="serverIpId" required>
          <el-select v-model="basicsFrom.serverIpId" placeholder="请选择" class="itemFrom"
            :disabled="publishStatusDisabled">
            <el-option v-for="dict in sys_server_ip" :key="dict.id" :label="dict.ipAddress" :value="dict.id"
              :disabled="!dict.status" />
          </el-select>
        </el-form-item>
       
        <el-form-item label="站点域名" prop="domainName" required>
          <el-input v-model="basicsFrom.domainName" placeholder="请输入" class="itemFrom" />
        </el-form-item>
     
        <el-form-item label="子域名" prop="subdomains" required style="width: 400px;">
          <el-input v-model="basicsFrom.subdomains" placeholder="请输入" :disabled="publishStatusDisabled" />
        </el-form-item>

        <el-form-item label="商城域名" prop="providerCloudServerDomainList" required>
          <el-cascader v-model="basicsFrom.providerCloudServerDomainList" :options="sys_server_domain" show-all-levels
            :props="serverProps" style="width: 400px;" @change="handleChangeService"
            :disabled="publishStatusDisabled" />
        </el-form-item>
        <el-form-item label="KID" prop="kid">
          <el-input placeholder="请输入" v-model.trim="basicsFrom.kid" class="itemFrom" />
        </el-form-item>

        <el-form-item label="快递" prop="newRecursive" required>
          <el-select v-model="basicsFrom.newRecursive" multiple clearable placeholder="请选择" class="itemFrom"
            @change="changeRecursive">
            <el-option v-for="item in sys_recursive" :key="item.id" :label="item.name" :value="item.id"
              :disabled="!item.status" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-tooltip class="box-item" effect="dark" content="描述中的多语言来自本页面选择的支持语言" placement="top">
            <el-button type="primary" @click="openDescription" style="margin: 28px 0">站点描述
              <el-icon>
                <QuestionFilled />
              </el-icon>
            </el-button>
          </el-tooltip>
        </el-form-item>


        <el-form-item required v-if="basicsFrom.transportLines.length" style="position: relative">
          <el-text style="position: absolute; top: -30px; left: 0; z-index: 9" type="info">快递价格包括快递本身费用和海关、税务</el-text>
          <el-table :data="basicsFrom.transportLines" style="width: 840px" border>
            <el-table-column prop="name" label="快递名称" align="center" />
            <el-table-column align="center">
              <template #header>
                <el-tooltip effect="dark" content="只有当订单商品总金额达到阈值填写的金额时，订单结算界面才会显示该快递选项" placement="top">
                  <el-button link>
                    阈值（{{`${sys_currency_code.find((a) => a.id === basicsFrom.currencyId)?.description || ""}`}}）
                    <el-icon>
                      <QuestionFilled />
                    </el-icon>
                  </el-button>
                </el-tooltip>
              </template>
              <template #default="scope">
                <el-input-number :precision="2" placeholder="请输入" :min="0" v-model="scope.row.threshold"
                  controls-position="right" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column :label="`价格（${sys_currency_code.find((a) => a.id === basicsFrom.currencyId)
              ?.description || ''
              }）`" align="center">
              <template #default="scope">
                <el-input-number :precision="2" placeholder="请输入" :min="0" v-model="scope.row.amount"
                  controls-position="right" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column label="商城排序" align="center">
              <template #default="scope">
                <el-input-number placeholder="请输入" :min="0" v-model="scope.row.seq" controls-position="right"
                  style="width: 100%" />
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="100">
              <template #default="scope">
                <el-button link type="danger" @click="deleteRecursive(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="联系邮箱" prop="email" required>
          <el-input placeholder="请输入" v-model.trim="basicsFrom.email" class="itemFrom" />
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone" required>
          <el-input placeholder="请输入" v-model.trim="basicsFrom.telephone" class="itemFrom" />
        </el-form-item>
        <el-form-item label="站点备注" prop="remark" required>
          <el-input placeholder="请输入" maxlength="300" rows="12" resize="none" show-word-limit type="textarea"
            v-model.trim="basicsFrom.remark" class="itemFrom">
          </el-input>
        </el-form-item>
      </el-form>

      <Modification :publicDialog="publicDialog" :publicItem="basicsFrom.websiteDescriptions"
        @handleModificationClose="handleModificationClose" @handleModificationSure="handleModificationSure">
      </Modification>
    </div>
    <div style="width: 200px;margin-left: 50%;margin-top: 10px;">
      <el-button type="primary" @click="submitFrom">保存</el-button>
      <el-button @click="backPage">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { QuestionFilled } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import Modification from "./components/pageModification.vue";
const { proxy } = getCurrentInstance();
const { sys_publish_status } = proxy.useDict("sys_publish_status");
const route = useRoute();
const router = useRouter();
const publicDialog = ref(false);
const publicDetails = ref({}); //详情数据

const publicItem = ref({}); //公共赋值数据
const sys_language_type = ref([]); //来源语言列表
const sys_currency_code = ref([]); //货币
const sys_currency_default = ref([]); //默认货币数据列表
const sys_language_default = ref([]); //默认语言数据列表
const sys_site_domain = ref([]); //站点域名

const newPublishStatus = ref(""); //默认"未发布"
const publishStatusDisabled = ref(false); //默认"未发布"

const sys_country = ref([]); //国家
const sys_level_list = ref([]); //服务商服务商账号服务器三级联动
const sys_server_domain = ref([]); //服务商服务商账号域名三级联动
const sys_server_ip = ref([]); //服务器IIP列表数据
const sys_pay_list = ref([]); //支付方式
const resultCountry = ref([]); //获取选择支付类型的国家



const sys_site_type = ref([]); //站点类型
const sys_recursive = ref([]); //快递

const sys_site_status = ref([{
  name: "启用",
  id: 1,
},
{
  name: "停用",
  id: 0,
}]); //站点状态

const checkedDisabled = ref(true); //默认是true，不能输入，只能选择配送政策的时候，才能显示可以输入
const basicsFrom = ref({
  logoImage: "", //站点图片
  iconImage: "", //站点icon图片
  name: "", //站点名称
  domainName: "", //基础域名
  webDomainName: '',//站点域名
  subdomains: '',//子域名
  providerCloudServerDomainName: '',//三级联动服务商服务商账号站点域名
  paymentWayIds: [],//支付方式
  currencyId: null, //默认货币
  currencyIds: [], //支持货币
  languageId: null, //默认语言 1中文 2英文
  languageIds: [], //支持语言
  countryId: null, //国家
  status: 1, //当前状态：上线1/维护0
  websiteTypeId: null, //站点类别
  transportLines: [], //transportId快递ID，amount运费，阈值：
  websiteDescriptions: [
    // {
    //   languageId:null,
    // address:'',
    //   description:''
    // }
  ], //站点描述
  remark: "", //备注
  email: "", //联系邮箱
  telephone: "", //联系电话

  kid: "", //网页端需要用到
  newServerIds: [],//选择3级联动的数组获取ip
  serverIpId: null,//IP
  providerCloudServerServer: '',//服务商服务商账号服务器id字符串



  newRecursive: [], //需要删除
  newDomain: [], //需要删除===级联动域名
  newImage: "", //需要删除照片
  newIconImage: "", //需要删除icon照片
  providerCloudServerDomainList: []//域名选择

});
const newType = ref(null);
watch(() => basicsFrom.value.newServerIds, (newVal) => {
  console.log('Selected IDs:', newVal);
});


onMounted(() => {
  getLanguage();
  if (Object.keys(route.query).length) {
    publicItem.value = route.query;
    newType.value = 0;
    getDetails(); //获取详情
  } else {
    newType.value = 1;
    newPublishStatus.value = "未发布";
    publishStatusDisabled.value = false;
  }
});

const submitFrom = () => {
  proxy.$refs["siteManageFromRef"].validate((valid) => {
    if (valid) {
      if (!proxy.publicArray(basicsFrom.value.transportLines, 1))
        return proxy.$modal.msgError("请填写快递的阈值和价格");
      if (!basicsFrom.value.transportLines.some((item) => item.threshold === 0))
        return proxy.$modal.msgError("快递的阈值必须有一个为0");
      if (!proxy.publicArray(basicsFrom.value.websiteDescriptions, 1))
        return proxy.$modal.msgError("请完整填写站点描述");

      if (payCountry()) {
        proxy.$modal
          .confirm("支付方式不支持当前选择的国家，请确认是否继续保存")
          .then(() => {
            fetchSubmitFrom()
          })
      } else {
        fetchSubmitFrom()
      }
    }
  });
};
const fetchSubmitFrom = () => {
  const { providerCloudServerDomainList, subdomains } = basicsFrom.value
  basicsFrom.value.webDomainName = `https://${subdomains}.${sys_site_domain.value.find(code => code.id === providerCloudServerDomainList[2])?.domainName}`



  if (newType.value) {
    site.general
      .sitewebsiteAdd({
        data: basicsFrom.value,
      })
      .then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("添加成功");
          backPage();
        }
      });
  } else {
    site.general
      .sitewebsiteUpdatebyid({
        pathParams: {
          id: publicItem.value.id,
        },
        data: basicsFrom.value,
      })
      .then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("修改成功");
          backPage();
        }
      });
  }
}

// 选择基础快递
const changeRecursive = (e) => {
  basicsFrom.value.transportLines = e.map((e) => {
    return {
      transportId: e,
      seq: 0,
      threshold: 0,
      amount: 0,
      name: sys_recursive.value.find((code) => code.id === e).name,
    };
  });
};

// 删除基础快递
const deleteRecursive = (rowItem, index) => {
  basicsFrom.value.transportLines.splice(index, 1);
  basicsFrom.value.newRecursive.splice(index, 1);
};

const getDetails = () => {
  site.general
    .sitewebsiteGetbyid({
      pathParams: {
        id: publicItem.value.id,
      },
    })
    .then((res) => {

      publicDetails.value = res.data;
      basicsFrom.value.logoImage = res.data.logoImage;
      basicsFrom.value.name = res.data.name;
      basicsFrom.value.countryId = res.data.countryId;
      basicsFrom.value.currencyIds = res.data.currencyIds;
      basicsFrom.value.languageIds = res.data.languageIds;
      basicsFrom.value.websiteTypeId = res.data.websiteTypeId;
      basicsFrom.value.domainName = res.data.domainName;
      basicsFrom.value.webDomainName = res.data.webDomainName;
      basicsFrom.value.iconImage = res.data.iconImage;
      basicsFrom.value.newIconImage = res.data.iconHost;
      basicsFrom.value.paymentWayIds = res.data.paymentWayIds;//支付方式

      basicsFrom.value.providerCloudServerDomainName = res.data.providerCloudServerDomainName;
      basicsFrom.value.providerCloudServerDomainList = res.data.providerCloudServerDomainName.split(',').map(Number);
      console.log(basicsFrom.value.providerCloudServerDomainList);

      let newUrl = new URL(res.data.webDomainName);
      let newName = sys_site_domain.value.find(code => code.id === basicsFrom.value.providerCloudServerDomainList[2])?.domainName
      basicsFrom.value.subdomains = newUrl.host.split(`.${newName}`)[0]

      basicsFrom.value.status = res.data.status;
      basicsFrom.value.email = res.data.email;
      basicsFrom.value.telephone = res.data.telephone;
      basicsFrom.value.kid = res.data.kid;
      // 三级联动
      basicsFrom.value.serverIpId = res.data.serverIpId;
      basicsFrom.value.providerCloudServerServer = res.data.providerCloudServerServer;
      basicsFrom.value.newServerIds = res.data.providerCloudServerServer.split(",").map(Number);
      // console.log(basicsFrom.value.newServerIds);
      getServerIp(basicsFrom.value.newServerIds[2])//获取服务器ip

      res.data.transportLines.forEach((e) => {
        basicsFrom.value.transportLines.push({
          transportId: e.transportId,
          threshold: e.threshold,
          amount: e.amount,
          seq: e.seq,
          name: sys_recursive.value.find((code) => code.id === e.transportId)
            ?.name,
        });
        basicsFrom.value.newRecursive.push(e.transportId);
      });
      basicsFrom.value.remark = res.data.remark;
      basicsFrom.value.newImage = res.data.host;
      sys_language_default.value = sys_language_type.value.filter((item) =>
        res.data.languageIds.includes(item.id)
      );
      selectLanguageDescription(res.data.websiteDescriptions);
      sys_currency_default.value = sys_currency_code.value.filter((item) =>
        res.data.currencyIds.includes(item.id)
      );
      basicsFrom.value.languageId = res.data.languageId; //默认语言
      basicsFrom.value.currencyId = res.data.currencyId; //默认货币

      newPublishStatus.value = sys_publish_status.value.find(
        (e) => e.value === res.data.publishStatus
      )?.label;
      if (res.data.publishStatus !== "Default") {
        publishStatusDisabled.value = true;
        let currencyIndex = sys_currency_code.value.findIndex(
          (code) => code.id === res.data.currencyId
        );
        sys_currency_code.value[currencyIndex].disabled = true;
      } else {
        publishStatusDisabled.value = false;
        sys_currency_code.value.forEach((item) => {
          item.disabled = false;
        });
      }
    });
};
const handleChange = (e) => {
  basicsFrom.value.providerCloudServerServer = ''
  if (e.length === 1) {
    proxy.$modal.msgError("服务商下面没有服务商账号数据，请添加");
    basicsFrom.value.newServerIds = []
  } else if (e.length === 2) {
    proxy.$modal.msgError("服务商账号下面没有服务器数据，请添加");
    basicsFrom.value.newServerIds = []
  } else {
    basicsFrom.value.serverIpId = null
    basicsFrom.value.providerCloudServerServer = basicsFrom.value.newServerIds.join(',')
    // console.log(e[2], '[[[[]]]]');
    getServerIp(e[2])//获取服务器ip
  }
}
const handleChangeService = (e) => {
  basicsFrom.value.webDomainName = ''
  if (e.length === 1) {
    proxy.$modal.msgError("服务商下面没有服务商账号数据，请添加");
    basicsFrom.value.providerCloudServerDomainList = []
  } else if (e.length === 2) {
    proxy.$modal.msgError("服务商账号下面没有域名数据，请添加");
    basicsFrom.value.providerCloudServerDomainList = []
  } else {
    basicsFrom.value.providerCloudServerDomainName = e.join(',')
    // basicsFrom.value.webDomainName = `https://${sys_site_domain.value.find(code => code.id === e[2])?.domainName}`
  }
}





const changePay = (list) => {//选择了支付方式时，进行国家国家处理逻辑
  let operatorCountry = sys_pay_list.value.filter(item => list.includes(item.id));
  if (operatorCountry.some(code => code.paymentWayCountryLineList == null)) {
    resultCountry.value = []
  } else {
    resultCountry.value = operatorCountry
  }
}
const payCountry = () => {
  if (resultCountry.value.length) {
    let result = !resultCountry.value.some(item =>
      item.paymentWayCountryLineList?.some(country => country.countryId === basicsFrom.value.countryId)
    );
    return result
  } else {
    return false
  }
}

// 获取支持语言数据，生成默认语言列表
const selectLanguage = (list) => {
  basicsFrom.value.languageId = "";
  sys_language_default.value = sys_language_type.value.filter((item) =>
    list.includes(item.id)
  );
  selectLanguageDescription(list);
};
const selectLanguageDescription = (list) => {
  basicsFrom.value.websiteDescriptions = [];
  list.forEach((e) => {
    basicsFrom.value.websiteDescriptions.push({
      languageId: e.languageId || e,
      address: e.address || "",
      description: e.description || "",
      seoTitle: e.seoTitle || "", //SEO标题,
      seoDescription: e.seoDescription || "", //站点SEO描述
      seoKeyword: e.seoKeyword || "", // 站点SEO关键字
    });
  });
};

// 获取支持货币数据，生成默认货币列表
const selectCurrency = (list) => {
  console.log(list, "list");
  sys_currency_default.value = sys_currency_code.value.filter((item) =>
    list.includes(item.id)
  );

  if (!list.find((code) => code === basicsFrom.value.currencyId))
    return (basicsFrom.value.currencyId = null);
};
// 设定某些选项不可删除
const isTagDisabled = (code) => {
  if (!publishStatusDisabled.value) return true;
  if (code === basicsFrom.value.currencyId) {
    return false;
  } else {
    return true;
  }
};
const handleClose = (e) => {
  basicsFrom.value.currencyIds.splice(
    basicsFrom.value.currencyIds.indexOf(e),
    1
  );
  selectCurrency(basicsFrom.value.currencyIds);
};

const openDescription = () => {
  if (!basicsFrom.value.languageIds.length)
    return proxy.$modal.msgError("请先选择支持语言");
  publicDialog.value = true;
};
const handleModificationClose = () => {
  publicDialog.value = false;
};
const handleModificationSure = () => {
  publicDialog.value = false;
};

const getLanguage = () => {
  let from = {
    pageNum: 1,
    pageSize: 999,
    param: {},
  };
  product.language.languageList().then((res) => {// 语言列表
    sys_language_type.value = res.data;
  });
  product.currency.currencyList().then((res) => {    // 获取货币
    sys_currency_code.value = res.data;
  });

  site.general
    .sitewebsitetypeList({
      data: from,
    })
    .then((res) => {     // 站点类型
      sys_site_type.value = res.data;
    });

  site.general
    .sitetransportList({
      data: from,
    })
    .then((res) => { // 快递管理
      sys_recursive.value = res.data;
    });

  site.general
    .sitedomainList({
      data: from,
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((e) => {//站点域名
          return {
            ...e,
            disabled: e.status === 1 && e.websiteIds?.length > 0,
          };
        });
      }
      sys_site_domain.value = res.data;
    });
  site.country
    .countryList({
      data: from,
    })
    .then((res) => {//国家地区列表
      sys_country.value = res.data;
    });
  site.general.sitewebsiteGetprovidercloudserverserverlist({}
  ).then((res) => {//服务商==服务商账号==服务器
    if (res.code == 200 && res.data?.length) {
      sys_level_list.value = setLeafField(res.data)
    }
  })
  site.general.sitewebsiteGetprovidercloudserverdomainnamelist({}
  ).then(res => {//服务器域名
    if (res.code == 200 && res.data?.length) {
      sys_server_domain.value = setLeafField(res.data)
    }
  })



  site.general.payment_wayList({
    data: from//支付管理数据列表
  }).then(res => {
    if (res.data?.length) {
      res.data = res.data.map(code => {
        return {
          ...code,
          region: region(code),
        }
      })
    }
    sys_pay_list.value = res.data
  })
};
const getServerIp = (serverId) => {
  let from = {
    pageNum: 1,
    pageSize: 999,
    param: {
      serverId: serverId || null//服务器id
    },
  };
  site.ip
    .siteserveriprangeList({
      data: from,
    })
    .then((res) => {// 服务器IP
      sys_server_ip.value = []
      sys_server_ip.value = res.data;
    })
}
const setLeafField = (list) => {
  return list.map(item => {
    // 判断 children 是否为 null 或空数组
    if (!item.children || item.children.length === 0) {
      // 如果没有 children，设置 hasChildren 为 false
      return {
        ...item,
        leaf: true,
      };
    } else {
      // 如果有 children，设置 hasChildren 为 true，并递归处理 children
      return {
        ...item,
        leaf: false,
        children: setLeafField(item.children) // 递归处理 children
      };
    }
  });
}
const serverProps = {
  value: 'id', // 选中的值字段
  label: 'name', // 显示的名称字段
  children: 'children', // 子节点字段
}
const region = (row) => {
  if (row.paymentWayCountryLineList && row.paymentWayCountryLineList.length) {
    return "支持部分国家"
  } else {
    return '支持所有国家'
  }
}
// 返回
const backPage = () => {
  proxy.resetForm("siteManageFromRef");
  basicsFrom.value.newRecursive = [];
  basicsFrom.value.newDomain = [];
  basicsFrom.value.newImage = "";
  basicsFrom.value.newIconImage = "";

  router.back();
};
const handleBaseUrl = (val) => {
  basicsFrom.value.logoImage = val.url;
};
const handleIconBaseUrl = (val) => {
  basicsFrom.value.iconImage = val.url;
};
const siteRules = reactive({
  newImage: [{ required: true, message: "请选择", trigger: "blur" }],
  newIconImage: [{ required: true, message: "请选择", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  countryId: [{ required: true, message: "请选择", trigger: "blur" }],
  currencyId: [{ required: true, message: "请先选择支持货币", trigger: "blur" },],
  currencyIds: [{ required: true, message: "请选择", trigger: "blur" }],
  websiteTypeId: [{ required: true, message: "请选择", trigger: "blur" }],
  languageId: [{ required: true, message: "请先选择支持语言", trigger: "blur" }],
  kid: [{ pattern: /^[A-Za-z0-9]+$/, message: "请正确输入", trigger: "blur" }],
  languageIds: [{ required: true, message: "请选择", trigger: "blur" }],
  reduceSill: [{ required: true, message: "请输入", trigger: "blur" }],
  status: [{ required: true, message: "请选择", trigger: "blur" }],
  serverIpId: [{ required: true, message: "请先选择服务器", trigger: "blur" }],
  providerCloudServerDomainList: [{ required: true, message: "请选择", trigger: "blur" }],
  newServerIds: [{ required: true, message: "请选择", trigger: "blur" }],
  subdomains: [{ required: true, message: "请输入", trigger: "blur" }, {
    pattern: /^(?!-)[a-z0-9-]{1,63}(?<!-)$/i,
    message: "请输入正确的子域名",
    trigger: "blur",
  }],
  domainName: [{ required: true, message: "请选择", trigger: "blur" }, {
    pattern: /^(?=.{1,255}$)(https?:\/\/)?(([a-zA-Z0-9-]{1,63}\.)+[a-zA-Z]{2,63})(:\d{1,5})?(\/\S*)?$/,
    message: "请输入正确的域名",
    trigger: "blur",
  }
  ],
  paymentWayIds: [{ required: true, message: "请选择", trigger: "blur" }],
  webDomainName: [
    { required: true, message: "请输入", trigger: "blur" }, {
      pattern: /^(http|https):\/\/([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/.*)?$/,
      message: "请输入正确的域名",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入", trigger: "blur" }, {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: "请输入正确的邮箱",
      trigger: "blur",
    },
  ],
  telephone: [
    { required: true, message: "请输入", trigger: "blur" }, {
      pattern: /^1[3-9]\d{9}$/ || /^(0\d{2,3}-?)?\d{7,8}(-|#\d+)?$/,
      message: "请输入正确的号码",
      trigger: "blur",
    },
  ],
  newRecursive: [{ required: true, message: "请选择", trigger: "blur" }],
  newDomain: [{ required: true, message: "请选择", trigger: "blur" }],
  remark: [{ required: true, message: "请输入", trigger: "blur" }],
});
var defaultProps = reactive({
  children: "children", label: "description", value: "id"// 指定 id 作为 value 属性
});

</script>
<style lang="scss" scoped>
.labelFrom {
  width: 1000px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 30px 60px;
}

.itemFrom {
  width: 400px;
}

.payType {
  float: right;
  margin-right: 10px;
  color: var(--el-text-color-secondary);
  font-size: 13px;
}
</style>